<template>
  <div>
    <!-- 图片上传组件辅助-->
    <el-upload
      style="margin-top:-20px"
      class="avatar-uploaderfu"
      action="http://127.0.0.1:8000/upload/"
      name='img'
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="success"
    >
      <i></i>
    </el-upload>
    <quill-editor
      v-model="html"
      ref="hdzcQuillEditor"
      :options="editorOption"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
// import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
import quillConfig from './quill-config.js'

export default {
  components: {
    quillEditor
  },
  mounted() {
    quillConfig.initButton()
  },
  data() {
    return {
      html: '',
      editorOption: quillConfig
    }
  },
  methods: {
    // 活动政策
    beforeUpload(file) {
      console.log(arguments)
      // let quill = this.$refs.hdzcQuillEditor.quill
      // var reader = new FileReader()
      // reader.readAsDataURL(file)
      // reader.onload = function (e) {
      //   let length = quill.getSelection(true).index
      //   // 插入图片  res.info为服务器返回的图片地址
      //   quill.insertEmbed(length, 'image', 'http://himg2.huanqiu.com/attachment2010/2018/0831/20180831054458188.jpeg')
      //   // 调整光标到图片后面
      //   quill.setSelection(length + 1)
      // }
    },
    // return file
    success(res) {
      // 获取富文本组件实例
      console.log(arguments)
      let quill = this.richbox
      let length = quill.getSelection(true).index
      // 插入图片  res.info为服务器返回的图片地址
      quill.insertEmbed(length, 'image', 'http://' + res)
      // 调整光标到图片后面
      quill.setSelection(length + 1)
    }
  }
}
</script>
